<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>RuoYi-Vue 服务器部署完全指南</title>
    <link href="https://cdn.staticfile.org/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <link href="https://cdn.staticfile.org/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.min.js"></script>
    <style>
        body {
            font-family: 'Noto Sans SC', Tahoma, Arial, Roboto, "Droid Sans", "Helvetica Neue", "Droid Sans Fallback", "Heiti SC", "Hiragino Sans GB", Simsun, sans-serif;
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
            min-height: 100vh;
        }
        
        /* 首字下沉效果 */
        .drop-cap::first-letter {
            float: left;
            font-size: 4rem;
            line-height: 3rem;
            padding-right: 0.5rem;
            margin-top: 0.5rem;
            font-weight: 700;
            color: #4f46e5;
            font-family: 'Noto Serif SC', serif;
        }
        
        /* 代码块美化 */
        pre {
            background: #1e293b;
            color: #e2e8f0;
            border-radius: 12px;
            padding: 1.5rem;
            overflow-x: auto;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
            position: relative;
            margin: 2rem 0;
        }
        
        pre::before {
            content: '';
            position: absolute;
            top: 0.75rem;
            left: 1rem;
            width: 12px;
            height: 12px;
            background: #ef4444;
            border-radius: 50%;
            box-shadow: 20px 0 0 #f59e0b, 40px 0 0 #10b981;
        }
        
        code {
            font-family: 'Fira Code', 'Consolas', monospace;
            font-size: 0.9rem;
            line-height: 1.6;
        }
        
        /* 卡片悬停效果 */
        .hover-card {
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }
        
        .hover-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
        }
        
        /* 渐变文字 */
        .gradient-text {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        
        /* 步骤编号样式 */
        .step-number {
            width: 40px;
            height: 40px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            flex-shrink: 0;
        }
        
        /* 时间线样式 */
        .timeline-line {
            position: absolute;
            left: 20px;
            top: 40px;
            bottom: 0;
            width: 2px;
            background: linear-gradient(to bottom, #667eea, #764ba2);
        }
        
        /* 提示框样式 */
        .tip-box {
            background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
            border-left: 4px solid #f59e0b;
            padding: 1rem 1.5rem;
            border-radius: 8px;
            margin: 1.5rem 0;
        }
        
        /* 滚动动画 */
        .fade-in {
            opacity: 0;
            transform: translateY(20px);
            animation: fadeIn 0.6s ease-out forwards;
        }
        
        @keyframes fadeIn {
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        /* 导航固定效果 */
        .sticky-nav {
            position: sticky;
            top: 0;
            z-index: 50;
            backdrop-filter: blur(10px);
            background: rgba(255, 255, 255, 0.9);
        }
    </style>
</head>
<body>
    <!-- Hero 区域 -->
    <section class="relative overflow-hidden bg-gradient-to-br from-indigo-600 via-purple-600 to-pink-500 text-white">
        <div class="absolute inset-0 bg-black opacity-20"></div>
        <div class="relative container mx-auto px-6 py-24 text-center">
            <h1 class="text-5xl md:text-7xl font-bold mb-6 animate-pulse">
                RuoYi-Vue 服务器部署
            </h1>
            <p class="text-xl md:text-2xl mb-8 opacity-90">
                使用 Cursor 编辑器远程部署的完整指南
            </p>
            <div class="flex justify-center space-x-6 text-lg">
                <div class="flex items-center">
                    <i class="fas fa-clock mr-2"></i>
                    <span>预计时间：2小时</span>
                </div>
                <div class="flex items-center">
                    <i class="fas fa-layer-group mr-2"></i>
                    <span>难度：中级</span>
                </div>
                <div class="flex items-center">
                    <i class="fas fa-tools mr-2"></i>
                    <span>全栈部署</span>
                </div>
            </div>
        </div>
        <div class="absolute bottom-0 left-0 right-0">
            <svg viewBox="0 0 1440 120" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M0 120L60 105C120 90 240 60 360 45C480 30 600 30 720 37.5C840 45 960 60 1080 67.5C1200 75 1320 75 1380 75L1440 75V120H1380C1320 120 1200 120 1080 120C960 120 840 120 720 120C600 120 480 120 360 120C240 120 120 120 60 120H0Z" fill="white"/>
            </svg>
        </div>
    </section>

    <!-- 导航栏 -->
    <nav class="sticky-nav shadow-md">
        <div class="container mx-auto px-6 py-4">
            <div class="flex flex-wrap justify-center space-x-6 text-sm md:text-base">
                <a href="#prepare" class="hover:text-purple-600 transition-colors"><i class="fas fa-cog mr-1"></i>前期准备</a>
                <a href="#connect" class="hover:text-purple-600 transition-colors"><i class="fas fa-plug mr-1"></i>远程连接</a>
                <a href="#environment" class="hover:text-purple-600 transition-colors"><i class="fas fa-server mr-1"></i>环境配置</a>
                <a href="#deploy" class="hover:text-purple-600 transition-colors"><i class="fas fa-rocket mr-1"></i>项目部署</a>
                <a href="#optimize" class="hover:text-purple-600 transition-colors"><i class="fas fa-chart-line mr-1"></i>系统优化</a>
                <a href="#maintain" class="hover:text-purple-600 transition-colors"><i class="fas fa-shield-alt mr-1"></i>维护备份</a>
            </div>
        </div>
    </nav>

    <!-- 主要内容区域 -->
    <main class="container mx-auto px-6 py-12">
        <!-- 架构图 -->
        <section class="mb-16 fade-in">
            <div class="bg-white rounded-2xl shadow-xl p-8">
                <h2 class="text-3xl font-bold mb-6 gradient-text text-center">系统架构概览</h2>
                <div class="mermaid">
                    graph TB
                        subgraph "客户端"
                            A[浏览器]
                        end
                        
                        subgraph "服务器"
                            B[Nginx<br/>端口:80/443]
                            C[前端静态资源<br/>Vue.js]
                            D[后端服务<br/>端口:8080]
                            E[MySQL 5.6<br/>端口:3306]
                            F[Redis<br/>端口:6379]
                        end
                        
                        A -->|HTTP/HTTPS| B
                        B -->|静态文件| C
                        B -->|API代理| D
                        D -->|数据存储| E
                        D -->|缓存| F
                        
                        style A fill:#e0e7ff,stroke:#6366f1
                        style B fill:#fef3c7,stroke:#f59e0b
                        style C fill:#dbeafe,stroke:#3b82f6
                        style D fill:#d1fae5,stroke:#10b981
                        style E fill:#fee2e2,stroke:#ef4444
                        style F fill:#fce7f3,stroke:#ec4899
                </div>
            </div>
        </section>

        <!-- 前期准备 -->
        <section id="prepare" class="mb-16 fade-in">
            <div class="bg-white rounded-2xl shadow-xl overflow-hidden">
                <div class="bg-gradient-to-r from-purple-600 to-indigo-600 text-white p-6">
                    <h2 class="text-3xl font-bold flex items-center">
                        <i class="fas fa-cog mr-3"></i>一、前期准备工作
                    </h2>
                </div>
                
                <div class="p-8">
                    <div class="grid md:grid-cols-2 gap-8">
                        <!-- Cursor 安装 -->
                        <div class="hover-card bg-gray-50 rounded-xl p-6">
                            <div class="flex items-start mb-4">
                                <div class="step-number">1</div>
                                <h3 class="text-xl font-semibold ml-4 mt-2">本地安装 Cursor 编辑器</h3>
                            </div>
                            <div class="ml-14">
                                <p class="text-gray-700 mb-4">Cursor 是一款强大的 AI 辅助编程工具，支持远程开发：</p>
                                <ol class="space-y-2 text-gray-600">
                                    <li class="flex items-start">
                                        <i class="fas fa-check-circle text-green-500 mr-2 mt-1"></i>
                                        <span>访问 <a href="https://cursor.sh/" target="_blank" class="text-purple-600 hover:underline">https://cursor.sh/</a> 下载 Windows 版本</span>
                                    </li>
                                    <li class="flex items-start">
                                        <i class="fas fa-check-circle text-green-500 mr-2 mt-1"></i>
                                        <span>运行安装程序，按照向导完成安装</span>
                                    </li>
                                    <li class="flex items-start">
                                        <i class="fas fa-check-circle text-green-500 mr-2 mt-1"></i>
                                        <span>启动 Cursor，熟悉基本界面</span>
                                    </li>
                                </ol>
                            </div>
                        </div>

                        <!-- SSH 插件安装 -->
                        <div class="hover-card bg-gray-50 rounded-xl p-6">
                            <div class="flex items-start mb-4">
                                <div class="step-number">2</div>
                                <h3 class="text-xl font-semibold ml-4 mt-2">安装 SSH 插件</h3>
                            </div>
                            <div class="ml-14">
                                <p class="text-gray-700 mb-4">通过 SSH 插件实现远程服务器连接：</p>
                                <ol class="space-y-2 text-gray-600">
                                    <li class="flex items-start">
                                        <i class="fas fa-puzzle-piece text-blue-500 mr-2 mt-1"></i>
                                        <span>点击左侧扩展图标</span>
                                    </li>
                                    <li class="flex items-start">
                                        <i class="fas fa-search text-blue-500 mr-2 mt-1"></i>
                                        <span>搜索 "Remote - SSH"</span>
                                    </li>
                                    <li class="flex items-start">
                                        <i class="fas fa-download text-blue-500 mr-2 mt-1"></i>
                                        <span>安装插件并重启 Cursor</span>
                                    </li>
                                </ol>
                                <div class="tip-box mt-4">
                                    <p class="text-sm"><i class="fas fa-lightbulb mr-2"></i>详细安装步骤请参考：<a href="https://www.yuque.com/jtostring/qiwsg9/gxagkc2mwcpugwgi" target="_blank" class="text-purple-600 hover:underline">安装指南</a></p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- 连接远程服务器 -->
        <section id="connect" class="mb-16 fade-in">
            <div class="bg-white rounded-2xl shadow-xl overflow-hidden">
                <div class="bg-gradient-to-r from-indigo-600 to-blue-600 text-white p-6">
                    <h2 class="text-3xl font-bold flex items-center">
                        <i class="fas fa-plug mr